<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入js包-->
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript" src="../js/axios.min.js" ></script>
    <!--导入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--导入组件-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .el-header{
        background-color: rgb(84, 92, 100);

    }
    .el-aside {
        background-color: rgb(84, 92, 100);

    }

    .el-tree-node__content:hover {
        background-color: #3f4144;
    }
    .el-tree-node:focus > .el-tree-node__content {
        background-color: #373839;
    }
    .el-tree-node__content{
        height:40px;
    }
    .el-tree{
        background-color:rgb(84, 92, 100);
    }
    .el-tree-node__label {
        font-size: 15px;
        color: white;
    }
    .el-menu.el-menu--horizontal{
        border-bottom: none;

    }
    .el-main{
        padding: 5px;
        height:868px;
    }
    .el-tree-node__expand-icon{
             margin-left:15px;
         }


    .el-menu-item,.is-disabled,.el-icon-caret-right,.el-submenu__title{
        font-size: 15px;
    }

    a{
        color:white;
        text-decoration:none;
    }
    .el-menu--horizontal > .el-submenu {
        float: right;
        margin-right:75px;
    }

</style>
<body>
<div id="app">
    <el-container>
        <!--头-->
        <el-header>
            <center >
                <span style="width: 500px;height: 70px;margin-left: 180px;"><img src="../img/logo.png" style="width: 500px;height: 70px; margin-top: -10px;"></span>
              <!--  <span v-html="aaa"></span>-->
                <span style="/*color: slateblue; */font-size: medium;float: right;padding-top: 0px">
                   <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">

               <el-submenu index="2">
              <template slot="title">
                  <!--获取session -->
                  <span v-html="aaa"></span>
              </template>
                   <!--返回登录界面-->
           <el-menu-item index="2-1"><a href="/login/login" style="color: gainsboro;">用户注销</a></el-menu-item>
            </el-submenu>
                     </el-menu>


                 </span>
            </center>
        </el-header>
        <el-container style="...">
            <!--左边-->
            <el-aside width="200px">
                <el-tree :data="treedata" :props="defaultProps" accordion  @node-click="handleNodeClick"></el-tree><!--树形控件-->
            </el-aside>

            <!--中间-->
            <el-main>
                <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                    <el-tab-pane
                            v-for="(item, index) in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name" >
                        <div class="iframe-container">
                            <span v-html = "item.content"></span>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>

    </el-container>
</div>
</body>
<script>
    var  app=new Vue({
        el:"#app",
        data:{
            activeIndex: '1',//下拉框

            aaa:"",//session
            treedata: [],//权限树
            defaultProps:{
                label:'label',
                children:'children'
            },//值得存取
            icon:'el-icon-menu',
            editableTabsValue: '2',
            editableTabs: [{
                title: '首页',
                name: '2',
                //首页显示路径
                content: "<iframe src='/welcome' frameborder=\"no\" scrolling=\"no\"  style=\"width:100%;height:735px\"> </iframe>"

            }],
            tabIndex: 2
        },
        created: function(){

            var self= this;
            //获取值存人session
            axios.post('/login/name').then(function (response) {
                self.aaa=response.data;
            })
            //根据存入session里的值查询所拥有的权限
            axios.post('/tree/listid').then(function (response) {
                self.treedata=response.data;
            })

        },
        methods:{
         /*  dataTree: function (data) {

                var url = data.url;
                var title =data.label;
                var content =  "<iframe src='"+url+"' frameborder=\"no\" scrolling=\"no\"  style=\"width:100%;height:780px;\"> </iframe>";
                if (url!=null&&url!='null'&&url!=''){
                    //alert(url);
                    this.addTab(content,title);
                }
            },
            */
            //跳转路径 在中间显示
            addTab: function (content,title) {
                let newTabName=title;
                if (JSON.stringify(this.editableTabs).indexOf(newTabName) == -1){
                    // alert(content);
                    this.editableTabs.push({
                        title : newTabName,
                        name : newTabName,
                        content : content
                    });
                    // alert(this.editableTabs);
                }
                this.editableTabsValue = newTabName;
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            //点击获取路径
            handleNodeClick: function (data) {

                var url = data.url;
                var title =data.label;
                var content =  "<iframe src='"+url+"' frameborder=\"no\" scrolling=\"no\"  style=\"width:100%;height:780px;\"> </iframe>";
                if (url!=null&&url!='null'&&url!=''){
                    //alert(url);
                    this.addTab(content,title);
                }
            },
//关闭 网页
           removeTab: function (targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            }
        },
    });
</script>
</html>
